<script setup lang="ts">
import httpClient from "../utils/HttpClient"
import { ElForm, ElFormItem , ElInput , ElLink, ElButton} from "element-plus";
import { getCurrentInstance, reactive, ref  } from 'vue';
import  { type UserEntity } from "spen-common/src/entity/User";
import { type LoginTypeEntity } from "spen-common/src/interface/RequestOperation";
import {   useRouter } from 'vue-router';
const instance = getCurrentInstance();
const router = useRouter();
const authenType = ref("password")
const selectType = ref(0)

const form = reactive<UserEntity>({
    email: '',
    icon: ''
})
const authen = reactive({
    phoneCode: '',
    emailCode: ''
})

const loginData = ref<LoginTypeEntity>({
    body: {
        account: '',
        authen: ''
    },
    type: 'phone'
});

async function registry(){
    let result = await httpClient.post("/user/register", form)
    console.log(result)
}

async function login(type: number){
    console.log(type)
    loginData.value.type = 
        type == 0 ? ( authenType.value == 'password' ?  'phone' : 'phone-code' ): 
        type == 1 ? ( authenType.value == 'password' ? 'email' : 'email-code' ) :
        type == 3 ? "code" :
         'phone';
    let result = await httpClient.post("/login/", loginData.value);
}
async function exits(){
    console.log(instance)
    router.replace("/");
}
</script>

<template>
    <div id="login-back-div">
    </div>
    <div id="login" >
        <div id="login-operation">
            <ui style="list-style: none; display: flex;">
                <li class="login-operation-item" :style="selectType == 0 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="selectType = 0">
                    手机号登录
                </li>
                <li class="login-operation-item" :style="selectType == 1 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="selectType = 1">
                    邮箱登录
                </li>
                <!-- <li class="login-operation-item" :style="selectType == 2 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="selectType = 2">
                    扫码登录
                </li> -->
                <li class="login-operation-item" :style="selectType == 3 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="selectType = 3">
                    授权码登录
                </li>
                <li class="login-operation-item" :style="selectType == 4 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="selectType = 4">
                    注册
                </li>
                <li class="login-operation-item" :style="selectType == 5 ? { textDecoration: 'underline white', color: 'white'} : {}" @click="exits">
                    退出
                </li>
            </ui>
        </div>
        <el-form :model="form" style="max-width: 600px; min-width: 360px; " >    

            <template v-if="selectType == 0">
                <el-form-item>
                    <ul style="
                        user-select: none;
                        list-style: none; 
                        font-size: 14px;
                        display: flex;
                        flex-direction: row;
                        padding-left: 0px;
                        ">
                        <li class="phone-login-type" 
                        :style="authenType == 'password'? {textDecoration: 'underline white', color: 'white'} : {}"
                        @click="authenType = 'password'"
                        >密码</li>
                        <li class="phone-login-type" 
                        :style="authenType == 'code'? {textDecoration: 'underline white', color: 'white'} : {}" 
                         @click="authenType = 'code'"
                        >认证码</li>
                    </ul>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="loginData.body.account"></el-input>
                </el-form-item>
                <el-form-item :label="authenType == 'password' ? '登录密码' : '认证码'">
                    <el-input v-model="loginData.body.authen" :style="authenType == 'code' ? {width: 'calc(100% - 103px)'} : {} "></el-input>
                    <el-button v-if="authenType == 'code' " style="position: absolute; right: 0px">获取认证码</el-button>
                </el-form-item>
                <el-form-item class="login-button" style="margin-top: 16px;" >
                    <el-button type="primary" @click="login(selectType)">登录</el-button>
                </el-form-item>
            </template>
            <template v-if="selectType == 1">
                <el-form-item>
                    <ul style="user-select: none;list-style: none; font-size: 14px;display: flex;flex-direction: row;padding-left: 0px;">
                    <li class="phone-login-type" 
                    :style="authenType == 'password'? {textDecoration: 'underline white', color: 'white'} : {}"
                    @click="authenType = 'password'"
                    >密码</li>
                    <li class="phone-login-type" 
                    :style="authenType == 'code'? {textDecoration: 'underline white', color: 'white'} : {}" 
                     @click="authenType = 'code'"
                    >认证码</li>
                    </ul>
                </el-form-item>
            
                <el-form-item label="邮箱地址">
                    <el-input v-model="loginData.body.account"></el-input>
                </el-form-item>
                <el-form-item :label="authenType == 'password' ? '登录密码' : '认证码'">
                    <el-input v-model="loginData.body.authen" :style="authenType == 'code' ? {width: 'calc(100% - 103px)'} : {} "></el-input>
                    <el-button v-if="authenType == 'code' " style="position: absolute; right: 0px">获取认证码</el-button>
                </el-form-item>
                <el-form-item class="login-button" style="margin-top: 16px;" >
                    <el-button type="primary"  @click="login(selectType)">登录</el-button>
                </el-form-item>

            </template>
            <!-- <template v-if="selectType == 2">
                <el-form-item id="login-qrcode">
                </el-form-item>
            </template> -->
            <template v-if="selectType == 3">       
                <el-form-item label="授权码">
                    <el-input v-model="loginData.body.account"></el-input>
                </el-form-item>
                <el-form-item class="login-button" style="margin-top: 16px;" >
                    <el-button type="primary"  @click="login(selectType)">登录</el-button>
                </el-form-item>
            </template> 
            <template v-if="selectType == 4">
                <el-form-item label="手机号码">
                    <el-input v-model="form.phone" style="width: calc(100% - 163px);" />
                    <el-input v-model="authen.phoneCode" style="width: 80px; margin-left: 5px;" class="phone-left-radius"/>
                    <el-link style="color: white; margin-left: 9px">发送认证</el-link>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" style="width: calc(100% - 163px);" />
                    <el-input v-model="authen.emailCode" style="width: 78px; margin-left: 5px;" class="phone-left-radius"/>
                    <el-link style="color: white; margin-left: 9px">发送认证</el-link>
                </el-form-item>
                <el-form-item label="授权码">
                    <el-input v-model="form.registry"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item class="login-button" style="margin-top: 16px;" >
                    <el-button type="primary" @click="registry"> 注册 </el-button>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<style lang="less" scoped>
@min-width: 560px;
@max-width: @min-width * 1.2;
@min-height: 260px;
@max-height: @min-height * 1.2;

.temp-center {
    display: flex;
    align-self: center;
    justify-self: center;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}


#login {
    @media (min-width: 20px) {
        position: absolute;
        width: @min-width * 0.9;
        height: @min-height * 0.9;
        top: calc( 50% - ( @min-height * 0.9 / 2 ) );
        left: calc( 50% - (@min-width * 0.9 / 2 ) );
    }
    @media (min-width: 600px) {
        width: @min-width;
        height: @min-height;
        top: calc( 50% - ( @min-height / 2 ) );
        left: calc( 50% - (@min-width / 2 ) );
        position: absolute;
    }
    @media (min-width: 950px) {
        width: @max-width;
        height: @max-height;
        top: calc( 50% - ( @max-height / 2 ) );
        left: calc( 50% - (@max-width / 2 ) );
        position: absolute;
    }

    opacity: 0.8;
    .temp-center();
    background-color: rgba(44, 44, 44, 0.788);
    border-radius: 11px
}

#login-form {
    .temp-center();
}


.login-button :deep(>div) {
    justify-content: right;

}

#login-back-div {
    height: calc( 100vh - 18px ); 
    width: calc( 100vw- 1px ); 
    overflow: hidden;
    border-radius: 11px;
    background-image: url(/bga.png);
    opacity: 0.9;
    background-repeat: no-repeat;
    background-size: cover;
}

#login-operation {
    background: linear-gradient(to right bottom,
    rgb(225, 225, 226),
    rgba(151, 209, 206, 0.767),
    rgba(173, 160, 123, 0.658),
    rgba(63, 95, 153, 0.712));
    position: absolute;
    width: 100%;
    padding: 2px 2px;
    bottom: -45px;
}
.login-operation-item {
    padding: 9px 1px;
    line-height: 16px;
    margin-top: 3px;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    margin: 1px 1px;
}
.login-operation-item:hover {
    color: white;
}
:deep(.el-form-item__label) {
    width: 69px;
    justify-content: center;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.884);
    background: white;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-right: 0px;
    margin: 0px 0px;
}
.el-form-item  {
    opacity: 0.99;
    margin-bottom: 10px;
}

#login-qrcode {
    width: 202px;
    height: 202px;
    background-color: rgba(191, 201, 201, 0.664);
    position: absolute;
    top: calc( 50% - 101px);
    left: calc(50% - 101px);
    border-radius: 5px;
}
:deep(.el-input__wrapper) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.phone-login-type {
    width: 55px;
    text-align: center;
    background: linear-gradient(to right bottom,
    rgb(164, 164, 185),
    rgba(63, 95, 153, 0.712));
    margin-left: 1px;
}
.phone-login-type:hover {
    color: white
}

.phone-left-radius :deep( > .el-input__wrapper) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
</style>